<!DOCTYPE html>
<!--
    Error {{ code }}: {{ message }}
    Description: {{ description }}
-->
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ code }}: {{ message }}</title>
    <style>
        html, body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        body {
            font: 20px Hack, Helvetica, sans-serif;
            color: #333;
        }

        canvas {
            z-index: 1;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .frame {
            z-index: 3;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 19%, rgba(0, 0, 0, .9) 100%);
        }

        .frame div {
            position: absolute;
            left: 0;
            top: -20%;
            width: 100%;
            height: 20%;
            background-color: rgba(0, 0, 0, .12);
            box-shadow: 0 0 30px rgba(0, 0, 0, .25);
            animation: horizontalLine 12s linear infinite;
        }

        .frame div:nth-child(1) {
            animation-delay: 0ms;
        }

        .frame div:nth-child(2) {
            animation-delay: 4s;
        }

        .frame div:nth-child(3) {
            animation-delay: 8s;
        }

        @keyframes horizontalLine {
            0% {top: -20%}
            100% {top: 100%}
        }

        .container-center {
            height: 100%;
            align-items: center;
            display: flex;
            justify-content: center;
        }

        .container-center div {
            z-index: 2;
        }

        h1, h2 {
            text-align: center;
            color: transparent;
            text-shadow: 0 0 10px rgba(0, 0, 0, .6);
        }

        h1 {
            font: bold 13em Arial, sans-serif;
            animation: codeText 2s linear infinite;
            margin: 0;
        }

        @keyframes codeText {
            0% {text-shadow: 0 0 15px rgba(0, 0, 0, .3)}
            33% {text-shadow: 0 0 5px rgba(0, 0, 0, .2)}
            66% {text-shadow: 0 0 10px rgba(0, 0, 0, .1)}
            100% {text-shadow: 0 0 15px rgba(0, 0, 0, .3)}
        }

        h2 {
            font: bold 2.5em Arial, sans-serif;
            animation: descriptionText 4s linear infinite;
            margin-bottom: 0;
        }

        @keyframes descriptionText {
            0% {text-shadow: 0 0 10px rgba(0, 0, 0, .5)}
            33% {text-shadow: 0 0 5px rgba(0, 0, 0, .1)}
            66% {text-shadow: 0 0 5px rgba(0, 0, 0, .25)}
            100% {text-shadow: 0 0 10px rgba(0, 0, 0, .5)}
        }
    </style>
</head>
<body>

<div class="container-center">
    <div>
        <h1>{{ code }}</h1>
        <h2>{{ description }}</h2>
    </div>
</div>

<div class="frame">
    <div></div>
    <div></div>
    <div></div>
</div>

<canvas id="canvas"></canvas>

<script>
    // main idea author: https://codepen.io/moklick

    const $canvas = document.getElementById('canvas'),
        width = Math.max(800, document.body.clientWidth),
        height = Math.max(600, document.body.clientHeight);

    $canvas.width = width;
    $canvas.height = height;

    const ctx = $canvas.getContext('2d');

    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, width, height);
    ctx.fill();

    const imgData = ctx.getImageData(0, 0, width, height), pix = imgData.data;

    const flickerInterval = window.setInterval(function () {
        for (let i = 0; i < pix.length; i += 4) {
            let color = (Math.random() * 255) + 50;
            pix[i] = color;
            pix[i + 1] = color;
            pix[i + 2] = color;
        }

        ctx.putImageData(imgData, 0, 0);
    }, 45);

    window.addEventListener('beforeunload', function (/** @param BeforeUnloadEvent event */ event) {
        window.clearInterval(flickerInterval);
    });
</script>
</body>
<!--
    Error {{ code }}: {{ message }}
    Description: {{ description }}
-->
</html>
